<template>
	<view class="page1">
		<view class="wind-header">
			<u-form :model="energyParam" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
					 ,fontSize: '30rpx',
			         color: '#808080'}" label="装机容量(万千瓦）" prop="capacity">
					<u-input type="number" v-model="energyParam.capacity" placeholder="请输入装机容量"></u-input>
				</u-form-item>
				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
					 ,fontSize: '30rpx',
					 color: '#808080'}" label="等效利用小时数(h)" prop="hours">
					<u-input type="number" v-model="energyParam.hours" placeholder="请输入小时数"></u-input>
				</u-form-item>

				<u-form-item label-width="300rpx" :label-style="{fontFamily: 'PingFang SC'
					 ,fontSize: '30rpx',
					 color: '#808080'}" label="资本金净利润率(%）" prop="yearName">
					<u-input type="select" placeholder="请选择标准" v-model="energyParam.yearName" @click="showPicker()">
					</u-input>

				</u-form-item>


			</u-form>


			<u-picker mode="selector" v-model="show" :range="columns" range-key="dictLabel" @confirm="confirm">
			</u-picker>

			<view class="calcbtn-box">
				<view class="calcbtn" @click="calc()">
					开始计算减排量
				</view>
			</view>
		</view>
		<view class="wind-content-data">
			<view class="wind-item-title">等效节能减排计算结果如下</view>
			<view class="wind-item">
				<view class="left">标准煤(吨)</view>
				<view class="right">{{energy.powerStandards}}</view>
			</view>
			<view class="wind-item">
				<view class="left">CO2(吨)</view>
				<view class="right">{{energy.coEmissions}}</view>
			</view>
			<view class="wind-item">
				<view class="left">SO2(吨)</view>
				<view class="right">{{energy.soEmissions}}</view>
			</view>
			<view class="wind-item">
				<view class="left">NOX(吨)</view>
				<view class="right">{{energy.noEmissions}}</view>
			</view>
			<view class="wind-item">
				<view class="left">烟尘(吨)</view>
				<view class="right">{{energy.smokeEmissions}}</view>
			</view>
			<view class="wind-item">
				<view class="left">水(吨)</view>
				<view class="right">{{energy.consumeWater}}</view>
			</view>
			<view class="wind-item">
				<view class="left">废水(吨)</view>
				<view class="right">{{energy.wasteWater}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'],
				number: "number",
				columns: [{
						year: 2017,
						yearName: "2017年标准"
					},
					{
						year: 2018,
						yearName: "2018年标准"
					}
				],
				show: false,
				energyParam: {
					yearName: "",
					year: 0,
					capacity: "",
					hours: "",
				},
				energy: {

					powerStandards: "",
					coEmissions: "",
					soEmissions: "",
					noEmissions: "",
					smokeEmissions: "",
					consumeWater: "",
					wasteWater: ""
				},
				rules: {

					capacity: [{
						required: true,
						message: '请输入装机容量',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}],
					hours: [{
						required: true,
						message: '请输入小时数',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}],
					yearName: [{
						required: true,
						message: '请选择标准',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],



				},
			}
		},
		mounted() {


		},
		onLoad() {
			var login = this.checkLogin();
			if (!login) {
				return false;
			}

			this.getDictData();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		},
		methods: {
			calc() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

						this.$u.api.calcEnergy(this.energyParam)
							.then(res => {
								this.energy = res.data;
								console.log(res.data, "数据");
							});
					} else {
						console.log('验证失败');
					}
				});

			},
			showPicker() {
				this.show = true;
			},
			navigateBack() {
				uni.navigateBack()
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.show = false;

				this.energyParam.year = this.columns[e].dictValue;
				this.energyParam.yearName = this.columns[e].dictLabel;
			},
			cancel(e) {
				this.show = false;
			},
			getDictData() {

				this.$u.api.getDictData({
						dictType: "wind_energy"
					})
					.then(res => {
						this.columns = res.rows;
						console.log(res);
					});

			},

		},
	}
</script>
<style lang="scss">
	.page1 {
		height: 100vh;
		background-color: #F7F7F7;
	}

	.wind-header {
		background-color: #FFFFFF;

		padding-left: 30rpx;
		padding-right: 30rpx;

		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #808080;
		}

		.item-value {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #333333;
		}

		.calcbtn-box {
			height: 120rpx;
			align-items: center;
			justify-content: center;
			display: flex;

			.calcbtn {
				width: 520rpx;
				height: 80rpx;
				background: #3BA2FF;
				border-radius: 44rpx;
				align-items: center;
				justify-content: center;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}
	}

	.wind-content-data {
		height: 100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.wind-item-title {
			margin-top: 20rpx;
			margin-left: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #333333;
			line-height: 48rpx;
		}

		.wind-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-left: 29rpx;
			margin-right: 29rpx;

			.left {
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #999999;
				line-height: 48rpx;
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
</style>
